<template>
    <div class="settle-type-wrapper">
        <IHeader class="header" back="true" title="选择入驻类型"></IHeader>
        <list class="list">
            <cell class="cell" @click="applySettle(item, index)" v-for="(item, index) in settleTypeList" :key="index">
                <div class="cell-inner">
                    <image class="icon" :src="imgPath(getIconUrl(item.value))"></image>
                    <div class="item" :class="[(index === 2 || index === settleTypeList.length - 1) ? '' : 'border-bottom']">
                        <div class="item-desc">
                            <div class="type">
                                <text class="name">{{item.description}}</text>
                                <text class="sign" :class="[item.type === personal ? 'bg_f88a41' : 'bg_5477de']">{{item.type === personal ? '个' : '企'}}</text>
                            </div>
                            <text class="describe">加入泳衣库，实现销量用户双增长</text>
                        </div>
                        <image class="arrow_right" :src="imgPath('arrow_right.png')"></image>
                    </div>
                </div>
                <!--<div class="slot" style="height: 32px;" v-if="index === 2"></div>-->
            </cell>
        </list>
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '../../components/header'
import { WxcLoading } from 'weex-ui'
import { queryDist } from '@/api/common'
// const modal = weex.requireModule('modal')
export default {
  name: 'settleType',
  data () {
    return {
      settleTypeList: [], // 类型列表
      needMask: true,
      tel: '', // 用户手机号
      personal: 'personal_enter_type',
      loadingShow: true // loading显示
    }
  },
  mounted () {
    const that = this
    that.tel = that.$route.query.tel
    that.$api.get(queryDist + 'company_enter_type', {}, function (res) {
      // that.settleTypeList = that.settleTypeList.concat(res.data)
      that.settleTypeList = res.data
      that.$api.get(queryDist + 'personal_enter_type', {}, function (data) {
        that.settleTypeList = that.settleTypeList.concat(data.data)
        that.loadingShow = false
      })
    })
  },
  methods: {
    applySettle (item) { // 页面跳转
      const that = this
      let path = item.type === that.personal ? 'settle/person' : 'settle/apply'
      that.$router.push({
        path: path,
        query: { item: item, tel: that.tel }
      })
    },
    getIconUrl (val) { // icon
      let url = ''
      let value = Number(val)
      switch (value) {
        case 1:
          url = 'swimsuit_factory'
          break
        case 2:
          url = 'fabric_dealer'
          break
        case 3:
          url = 'excipient_dealer'
          break
        case 4:
          url = 'designer'
          break
        case 5:
          url = 'printer'
          break
        case 6:
          url = 'sam_garm_worker'
          break
        case 7:
          url = 'tailor'
          break
        case 8:
          url = 'temp_worker'
          break
        default:
          url = 'swimsuit_factory'
      }
      url = url + '.png'
      return url
    }
  },
  components: {
    IHeader,
    WxcLoading
  }
}
</script>

<style scoped>
    .list {
        margin-top: 88px;
    }
    .cell-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-right: 24px;
        padding-left: 24px;
    }
    .icon {
        width: 68px;
        height: 68px;
        margin-right: 24px;
    }
    .item {
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .arrow_right {
        width: 24px;
        height: 36px;
    }
    .type {
        flex-direction: row;
        align-items: center;
    }
    .name {
        margin-right: 16px;
        font-size: 30px;
        color: #464646;
        font-family: medium;
    }
    .sign {
        width: 26px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        font-size: 22px;
        color: #fff;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    .bg_5477de {
        background-color: #5477de;
    }
    .bg_f88a41 {
        background-color: #f88a41;
    }
    .describe {
        color: #868686;
        font-size: 24px;
        font-family: regular;
    }
    .border-bottom {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #cecece;
    }
</style>
